/* Code tidied up by ScrapBook */
.global-site-notice { float: left; width: 100%; display: none; }
.page { float: left; width: 100%; }
.demoheader { float: left; width: 100%; background: rgb(47, 47, 47) none repeat scroll 0% 0%; text-align: center; display: block; z-index: 100000; position: relative; left: 0px; top: 0px; transition: all 400ms ease-out 0s; }
.demoheader .demoheader-wrap, .demoheader-off .demoheader-wrap { border: medium none; }
.demoheader-off { float: left; width: 20px; position: absolute; top: -100px; z-index: 1000; }
.demoheader .col-1 { float: left; width: 200px; margin-left: 35px; }
.demoheader .col-2 { float: left; height: 24px; line-height: 24px; color: rgb(255, 255, 255); width: 777px; }
.demoheader .col-2 h2 { float: left; padding-left: 10px; padding-right: 10px; width: 400px; text-align: right; }
.demoheader .col-3 { float: right; }
.demoheader .ms-logo img { margin-top: 0px; }
.demoheader h2 { font-size: 17px; color: rgb(255, 255, 255); text-transform: none; line-height: 18px; padding: 10px 0px; margin: 0px; }
.demoheader .right p { padding: 3px 15px; border-left: 1px solid rgb(61, 60, 60); border-right: 1px solid rgb(61, 60, 60); float: left; margin: 0px; }
.demoheader .right p a { color: rgb(255, 255, 255); font-size: 12px; text-decoration: none; float: left; border-radius: 4px; transition: all 400ms ease-out 0s; }
.demoheader .right p .product-link { background: rgb(83, 185, 115) none repeat scroll 0% 0%; padding: 9px 12px; margin-right: 15px; }
.demoheader .right p .product-link:hover { background: rgb(88, 218, 128) none repeat scroll 0% 0%; }
.demoheader .right p .backend-link { background: rgb(211, 89, 61) none repeat scroll 0% 0%; padding: 9px 25px; }
.demoheader .right p .backend-link:hover { background: rgb(244, 108, 76) none repeat scroll 0% 0%; }
.demoheader-wrap .close-demo { 
  float: left; margin-top: 17px; 
  margin-left: 20px; width: 26px; 
  height: 26px; text-decoration: none; 
  border-radius: 4px; border: 1px solid rgb(156, 156, 156); 
  background: transparent url("../images/icon-demo.png") no-repeat scroll center 8px; 
}
.demoheader-off .close-demo { 
  margin: 0px; border: 0px none; color: initial; display: block; height: 100%; 
}


.demoheader-off .box-close { 
  float: right; 
  background: url("../images/icon-demo.png") no-repeat scroll center -36px; 
  border-bottom-left-radius: 7px; 
  border-bottom-right-radius: 7px; 
  margin-top: 0px; width: 28px; height: 24px; 
  background-color: #2f2f2f;
}



@media only screen and (max-width: 1250px) {
  .demoheader .col-2 { margin-left: 15%; }
  .demoheader-off .box-close { margin-right: 0px; position: absolute; right: 0px; }
}
@media only screen and (max-width: 1020px) {
  .demoheader .col-2 { margin-left: 5%; }
}
@media only screen and (max-width: 950px) {
  .demoheader .col-2 { display: none; }
  .demoheader .right p { border: medium none; }
}
@media only screen and (max-width: 525px) {
  a.ms-logo.col-1 { width: 100%; }
  .demoheader .ms-logo img { margin: 10px auto 0px; }
  .demoheader .right p { margin-left: 25%; }
  .demoheader .col-3 { width: 100%; }
}
@media only screen and (max-width: 430px) {
  .demoheader .demoheader-wrap .close-demo { float: right; margin: -5px 0px 10px; }
  .demoheader .right p { float: none; margin: 10px auto 0px; width: 265px; }
}


.demoheader-off.active {
    top: 0;
    right: 70px;
    transition: all 400ms ease-out;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
}


